<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锁定列</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerY="false"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->

<!-- 日期选择框start -->
<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
<!-- 日期选择框end -->
<!--布局控件start-->
<script type="text/javascript" src="../../libs/js/nav/layout.js"></script>
<!--布局控件end-->
<style>
	.tdContentStyle1{



    background-repeat:no-repeat;

    padding:5px 0 0 10px;
	line-height:150%;

}
	.tdContentStyle2{



    background-repeat:no-repeat;

    padding:5px 0 0 10px;
	line-height:150%;

}
</style>
</head>
<body>

	<div id="layout1">
      <div position="top" id="bottomCon" style="" panelTitle="条件检索">
          <div class="formBoxContent">
      <table>
        <tr>
          <td width="60" class="ali03">类型：</td>
          <td><select id="dd">
            <option value="0">请选择</option>
            <option value="1">类型1</option>
            <option value="2">类型2</option>
            <option value="3">类型3</option>
          </select></td>
          <td width="60" class="ali03">时间：</td>
          <td><input type="text" class="date"/></td>
          <td width="60" class="ali03">关键词：</td>
          <td><input type="text" /></td>
          <td>
             <input type="checkbox" id="checkbox-1" value="0"/><label for="checkbox-1" >全站搜索</label>
          </td>
          <td><button><span class="icon_find">查询</span></button></td>
        </tr>
      </table>
    </div>            
        </div>
        <div   position="center" panelTitle="主要数据">
  
			<div id="maingrid2"></div>
       
        </div>
        <div  position="right" panelTitle="详细数据">
        	 <div id="maingrid"></div>


        </div>
        
    </div> 

	
	<script type="text/javascript">
        var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"deptName":"部门1","sex":"女","remark":"好啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":125,"degree":"硕士结业","age":20,"name":"员工1","deptId":12,"ability":1},
      {"deptName":"部门1","sex":"男","remark":"备注啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":124,"degree":"本科毕业","age":20,"name":"员工2","deptId":11,"ability":2},
      {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工3","deptId":9,"ability":2},
      {"deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工4","deptId":8,"ability":3},
      {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工5","deptId":7,"ability":4},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工6","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工7","deptId":6,"ability":6},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工8","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工9","deptId":6,"ability":3},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工10","deptId":6,"ability":1},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工10","deptId":6,"ability":1},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工10","deptId":6,"ability":1},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"博士肄业","age":20,"name":"员工11","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"博士肄业","age":20,"name":"员工12","deptId":6,"ability":5}
      ]}
       
	   
	    var testData2={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"}
      
      ]}
       //数据表格使用
        var g;
        var g2;
		function initComplete(){
      var currentwidth = document.documentElement.clientWidth;
			 var layout=$("#layout1").layout({ rightWidth: currentwidth/2,topHeight:80,allowTopResize:false,onEndResize:function(){
			 	g.resetWidth();
			 	g2.resetHeight();
			 }}); 

			 g = $("#maingrid").quiGrid({
                 columns: [ 
					{ display: '姓名', name: 'name', align: 'center',  width: "30%"},

	                { display: '性别', name: 'sex', align: 'center' , width: "20%"},
	                { display: '部门', name: 'deptName',  align: 'center' , width: "30%"},
	                { display: '学历', name: 'degree',  align: 'center', width: "20%" }
                ], data:testData, pageSize: 20, rownumbers:true, checkbox:true,percentWidthMode:true,
                height: '100%', width:"100%",onReload:function(){return false}
            });
			
			g2 = $("#maingrid2").quiGrid({
                columns: [ 
	                
					  { display: '姓名', name: 'name', align: 'center',  width: "30%", render: function (rowdata, rowindex, value, column){

                        var strhtml='<div class="tdContentStyle1">' + rowdata.name+ '</div>';

                     return strhtml;

}  },
	                { display: '性别', name: 'sex', align: 'center' , width: "20%", render: function (rowdata, rowindex, value, column){

                        var strhtml='<div class="tdContentStyle2">' + rowdata.sex+ '</div>';

                     return strhtml;

}  },
	                { display: '部门', name: 'deptName',  align: 'center' , width: "30%", render: function (rowdata, rowindex, value, column){

                        var strhtml='<div class="tdContentStyle2">' + rowdata.deptName+ '</div>';

                     return strhtml;

}  },
	                { display: '学历', name: 'degree',  align: 'center', width: "20%" , render: function (rowdata, rowindex, value, column){

                        var strhtml='<div class="tdContentStyle1">' + rowdata.degree+ '</div>';

                     return strhtml;

}  }
                ], data:testData2, pageSize: 10, rownumbers:false, checkbox:false,percentWidthMode:true,
                height: '100%', width:"100%",rowHeight:65,onReload:function(){return false}
            });
			
		

		}
        
    </script>	
</body>
</html>